<template>
  <div>
    <div id="c"></div>
  </div>
</template>

<script setup>
import Matter from "matter-js";
var Engine = Matter.Engine,
  Render = Matter.Render,
  World = Matter.World,
  Bodies = Matter.Bodies;

var engine = Engine.create();

var render = Render.create({
  element: document.body,
  engine: engine,
  options: {
    width: window.screen.width,
    height: window.screen.height,
    wireframes: false,
  },
});

var boxA = Bodies.rectangle(400, 0, 180, 180);
var ballA = Bodies.circle(380, 100, 40, 10);
var ballB = Bodies.circle(460, 10, 40, 10);
var ground = Bodies.rectangle(400, 380, 810, 60, { isStatic: true });

World.add(engine.world, [boxA, ballA, ballB, ground]);

Engine.run(engine);
Render.run(render);
</script>
